<style lang="less" scoped>
  .page__wrapper {
    width: 100%;
    height: 100%;
  }
</style>

<template>
  <div class="page__wrapper">
    <simple-table hasSelection :pageable="false" isBigdata :table-column="tableColumn" :table-data="tableData">
      <template slot="searchSection">
        <simple-form v-model="searchModel" :form-field="searchFormField">
          <template slot="tableOperation">
            <el-button>{{$t('operation.search')}}</el-button>
            <el-button type="primary">{{$t('operation.downloadTemplate')}}</el-button>
            <el-button type="primary">{{$t('operation.import')}}</el-button>
            <el-button type="primary">{{$t('operation.export')}}</el-button>
            <el-button type="primary">{{$t('operation.create')}}</el-button>
          </template>
        </simple-form>
      </template>
      <template slot="sex" slot-scope="scope">
        {{'插槽测试' + scope.$index}}
      </template>
      <template slot="operation" slot-scope="scope">
        <el-button circle icon="el-icon-search" :title="$t('operation.view')" @click="handleViewClick(scope.row)"></el-button>
        <el-button circle icon="el-icon-edit" :title="$t('operation.edit')" @click="handleEditClick(scope.row)"></el-button>
        <el-button @click="deleteRecord(scope.row)" circle icon="el-icon-delete" :title="$t('operation.delete')"></el-button>
      </template>
    </simple-table>
  </div>
</template>
<script>
export default {
  name: 'demo-bigdata-table',
  data () {
    return {
      searchModel: {},
      /** 表格数据 */
      tableData: [],
      rowData: {}
    }
  },
  computed: {
    searchFormField () {
      return [
        { prop: 'username', label: this.$t('system_user.username'), type: 'Input', component: { clearable: true } },
        { prop: 'fullname', label: this.$t('system_user.fullname'), type: 'Input', component: { clearable: true } },
        { prop: 'sex', label: this.$t('system_user.sex'), type: 'Select', component: { optionList: this.$getDictList('Sex'), clearable: true } },
        { prop: 'status', label: this.$t('system_user.status'), type: 'Select', component: { optionList: this.$getDictList('Sex'), clearable: true } },
        { slotName: 'tableOperation', col: { span: 24, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    },
    tableColumn () {
      return [{ label: '测试一级',
        children: [
          {
            label: '测试二级',
            children: [
              {
                label: '测试三级',
                children: [
                  {
                    label: '测试四级',
                    children: [
                      { prop: 'phone', label: this.$t('system_user.phone'), width: 120 },
                      { prop: 'phone', label: this.$t('system_user.phone'), width: 120 },
                      { prop: 'sex', label: this.$t('system_user.sex'), width: 80, slotName: 'sex' }
                    ]
                  },
                  {
                    label: '测试四级',
                    children: [
                      { prop: 'phone', label: this.$t('system_user.phone'), width: 120 },
                      { prop: 'phone', label: this.$t('system_user.phone'), width: 120 }
                    ]
                  }
                ]
              },
              { prop: 'phone', label: this.$t('system_user.phone'), width: 120 }
            ]
          },
          {
            label: '测试二级',
            children: [
              { prop: 'sex', label: this.$t('system_user.sex'), width: 80, slotName: 'sex' }
            ]
          }
        ]
      },
      { prop: 'sex', label: this.$t('system_user.sex'), width: 80, align: 'center' },
      { prop: 'phone', label: this.$t('system_user.phone'), width: 150 },
      { prop: 'phone', label: this.$t('system_user.phone'), width: 150 },
      { prop: 'phone', label: this.$t('system_user.phone'), width: 150 },
      { prop: 'status', label: this.$t('system_user.status'), width: 80 },
      { prop: 'logincount', label: this.$t('system_user.logincount'), width: 80 },
      { prop: 'lastlogintime', label: this.$t('system_user.lastlogintime'), minWidth: 150 },
      { prop: 'lastloginip', label: this.$t('system_user.lastloginip'), minWidth: 150 },
      { prop: 'email', label: this.$t('system_user.email'), minWidth: 150 },
      { label: this.$t('field.operation'), slotName: 'operation', width: 100, fixed: 'right' }
      ]
    }
  },
  methods: {
    handleDataSearch () {
      setTimeout(() => {
        let data = []
        for (let i = 0; i < 10000; i++) {
          data.push({
            id: `test--${i}`,
            email: 'admin@admin.com' + i,
            fullname: '系统管理员' + i,
            lastloginip: '192.168.3.99' + i,
            lastlogintime: '2019-03-18 11:27:57' + i,
            logincount: 387 + i,
            phone: '13431142222' + i,
            sex: '妖' + i,
            status: 1 + i,
            userid: 'd8e1ae3b-8451-436a-a59b-c7516e711b9c' + i,
            username: 'admin' + i
          })
        }
        this.tableData = data
      }, 1000)
    }
  },
  mounted () {
    this.handleDataSearch()
  }
}
</script>
